<template>
  <div class="tempxyz tableHeight">
    <CCard>
      <CCardHeader>
        <!-- class=strongstyle -->
        <strong class="title">统计分析</strong>
      </CCardHeader>
      <CCardBody class="card-body">
        <div class="cardstyle">
          <div class="rowstyle">
            <div class="threePart" style="margin-bottom: 10px">
              <div class="startStutes layout">
                <label class="labelName">开始日期</label>
                <DatePicker
                  type="datetime"
                  placeholder="请选择开始日期"
                  format="yyyy-MM-dd"
                  v-model="selectData.startTime"
                  class="pickstyle"
                ></DatePicker>
              </div>
              <div class="endDateBtn layout">
                <label class="labelName" style="width: 60px">结束日期</label>
                <DatePicker
                  type="datetime"
                  placeholder="请选择结束日期"
                  v-model="selectData.endTime"
                  format="yyyy-MM-dd"
                  class="pickstyle"
                ></DatePicker>
              </div>
              <div class="searchRight"></div>
            </div>

            <div class="secondPart">
              <div class="myColtemp layout">
                <label style="margin-right: 52px; display: inline-block"
                  >部门</label
                >
                <CSelect
                  label=""
                  :options="officeNameList"
                  :value.sync="selectData.officeName"
                />
              </div>
              <div class="myColtemp" style="width: 33.3%">
                <label
                  class="myColPri"
                  style="margin-right: 8px; display: inline-block"
                  >卫星/传感器</label
                >
                <CSelect
                  label=""
                  :options="sensorList"
                  :value.sync="selectData.sensor"
                  horizontal
                />
              </div>
              <div class="searchRight">
                <CButton color="info" @click="search()" class="myCol1 listbtn system-btn-style">
                  <CIcon name="cil-magnifying-glass" />&nbsp;搜索
                </CButton>

                <CButton color="info" @click="clearmess()" class="myCol1 clean system-btn-style">
                  <img
                    src="@/assets/icons/chongzhi.png"
                    style="width: 15px; height: 15px"
                    alt
                  />&nbsp; 重置
                </CButton>
                <CButton color="info" @click="outFile()" class="myCol1 clean system-btn-style">
                  <CIcon name="cil-account-logout" />&nbsp; 输出报告
                </CButton>
              </div>
            </div>
          </div>
        </div>
        <TableList
          ref="table"
          :showSummary="showSummary"
          :showPagination="false"
          :getColumn="getColumn"
          :handleSpanData="handleSpanData"
          style="height: calc(100% - 150px)"
          :getAxios="getAxios"
        >
        </TableList>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";
export default {
  name: "taskStatistics",
  components: { TableList },
  data() {
    return {
      selectData: {
        officeName: "",
        sensor: "",
        startTime: "",
        endTime: "",
      },
      officeNameList: ["全部"],
      sensorList: ["全部"],
      showSummary: {
        boolean: true,
        text: "总计",
        height: 10,
      },
      getAxios: {
        url: this.$api.taskManageApi.statistical, //请求路径
        method: "get", //请求方式
        dataList: {
          pageNum: "",
          pageSize: "",
        }, //请求参数
      },

      getColumn: [
        {
          title: "部门",
          key: "officename",
        },
        {
          title: "卫星",
          key: "dataType",
          width: 180,
          className: "centerText",
        },
        {
          title: "传感器",
          key: "sensor",
          width: 180,
          className: "centerText",
        },
        {
          title: "成果数据量(GB)",
          key: "imageSize",
          width: 180,
          className: "centerText",
        },
        {
          title: "成果数量(景)",
          key: "imageNumber",
          width: 220,
          className: "centerText",
        },
        {
          title: "任务类型",
          key: "taskSource",
          width: 240,
          className: "centerText",
        },
      ],
      handleSpanData: {
        handleSpanBoolean: true,
        columnIndex: 1,
        columnName: "officename",
      },
    };
  },

  computed: {
    comSelectData() {
      return {
        dataType:
          this.selectData.sensor.split("-")[0] &&
          this.selectData.sensor.split("-")[0] != "全部"
            ? this.selectData.sensor.split("-")[0]
            : "",
        sensor: this.selectData.sensor.split("-")[1]
          ? this.selectData.sensor.split("-")[1]
          : "",
        officeName: this.selectData.officeName,
        startTime: this.selectData.startTime
          ? this.$moment(this.selectData.startTime).format("YYYY-MM-DD")
          : "",
        endTime: this.selectData.endTime
          ? this.$moment(this.selectData.endTime).format("YYYY-MM-DD")
          : "",
        pageNum: "",
        pageSize: "",
      };
    },
  },
  mounted() {
    this.getOfficeName();
    this.getSatelLitesensor();
  },
  methods: {
    //获取部门
    getOfficeName() {
      let that = this;
      let param = { isTree: false };
      let path = that.$api.taskManageApi.getTree;
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          res.data.data.forEach((item) => {
            that.officeNameList.push(item.name);
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    //获取卫星参数
    getSatelLitesensor() {
      let that = this;
      let path = this.$api.taskManageApi.dataType;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          res.data.data.forEach((item) => {
            that.sensorList.push(item.satellite + " - " + item.sensor);
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    //搜索表格数据
    search() {
      this.$refs.table.getRefreshTable(this.comSelectData);
    },
    //重置
    clearmess() {
      this.selectData.endTime = "";
      this.selectData.startTime = "";
      this.selectData.officeName = "";
      this.selectData.sensor = "";
      this.$refs.table.getRefreshTable(this.comSelectData);
    },
    //输出
    outFile() {
      window.location.href =
        this.$api.taskManageApi.exportResult +
        "?officeName=" +
        this.selectData.officeName +
        "&sensor=" +
        this.selectData.sensor +
        "&startTime=" +
        this.selectData.startTime +
        "&endTime=" +
        this.selectData.endTime;
    },
  },
};
</script>
<style scoped>
/deep/.ivu-table td.centerText {
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.myCol {
  margin-left: 10px;
  display: flex;
  align-items: center;
}
.myColPri {
  margin-right: 10px;
}
.myCol1 {
  margin-left: 0px;
}
.myColtemp {
  display: flex;
  align-items: center;
  width: 33.3%;
}
.search {
  display: flex;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.76563rem;
  line-height: 1.5;
  border-radius: 0.2rem;
  width: 50px;
}

.labelName {
  margin-right: 25px;
  margin-bottom: 0px;
}
.m_radio_group {
  height: 21px;
  margin-top: -9px;
}
.m_radio_group label {
  margin: 0;
  margin-right: 14px;
}
.btnStyle {
  padding: 0;
  margin: 0 3px;
}
.btnStyle:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.strongstyle {
  font-size: 18px;
}

.pickstyle {
  width: 58%;
}
 
.clean {
  margin-left: 10px;
}
.listbtn {
  margin-left: 0px;
}
.deletestyle {
  width: 15px;
  height: 15px;
}
.page-link {
  cursor: pointer;
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: black;
}
.modal-header {
  display: flex;
  justify-content: flex-start;
}
 
.endDateBtn {
  /*margin-right: -2%;*/
}
.threePart,
.secondPart {
  display: flex;
  justify-content: flex-start;
}
.layout {
  width: 33.3%;
}
.searchRight {
  width: 33%;
}
.searchRight > .btnstyle1 {
  position: absolute;
  right: 2%;
}
/* 用以调整表格位置 */
.tablePosition {
  overflow-y: auto;
  height: calc(100% - 158px);
}
.myColtemp /deep/ .form-group {
  width: 58%;
  margin-bottom: 0;
}

.myColtemp /deep/ .form-control {
  width: 100%;
}

.myColtemp/deep/ .col-sm-9 {
  width: 100% !important;
  flex: 1;
  max-width: 100%;
}
.rowstyle {
  margin-bottom: 0;
}
</style>
<style >
.tempxyz .card-body {
  overflow-y: auto;
  height: calc(100% - 52px) !important;
}
.tempxyz .card-body {
  position: static;
  padding: 0 20px;
}

.tablePosition > div {
  height: 100% !important;
  width: 100% !important;
  border: 1px solid #d8dbe0;
  border-left: 0;
  border-right: 0;
}

.table {
  margin-bottom: 0;
}

.table th {
  border-top: 0;
}

.cardstyle {
  margin: 10px 0;
}
</style>
